<template>
  <div class="page-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <Left />
      </div>
      <h1 class="title">收货地址</h1>
      <div class="add-btn" @click="addNewAddress">新增</div>
    </div>

    <!-- 地址列表 -->
    <div class="address-list" v-if="addressStore.addressList.length">
      <div 
        class="address-item"
        v-for="address in addressStore.addressList"
        :key="address.id"
      >
        <div class="address-content" @click="selectAddress(address)">
          <div class="address-header">
            <div class="contact-info">
              <span class="name">{{ address.name }}</span>
              <span class="phone">{{ address.phone }}</span>
            </div>
            <div class="address-tags">
              <span class="tag" v-if="address.tag">{{ address.tag }}</span>
              <span class="default-badge" v-if="address.isDefault">默认</span>
            </div>
          </div>
          <div class="address-detail">
            {{ address.province }} {{ address.city }} {{ address.district }} {{ address.address }}
          </div>
        </div>
        
        <div class="address-actions">
          <div class="action-item" @click="setDefaultAddress(address.id)" v-if="!address.isDefault">
            <span class="action-text">设为默认</span>
          </div>
          <div class="action-item" @click="editAddress(address.id)">
            <span class="action-text">编辑</span>
          </div>
          <div class="action-item delete" @click="deleteAddress(address.id)" v-if="addressStore.addressList.length > 1">
            <span class="action-text">删除</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-else>
      <div class="empty-icon">📍</div>
      <h3>暂无收货地址</h3>
      <p>添加收货地址，享受便捷购物体验</p>
      <nut-button type="primary" @click="addNewAddress">添加地址</nut-button>
    </div>

    <!-- 删除确认弹窗 -->
    <nut-popup v-model:visible="showDeleteConfirm" position="center" :style="{ width: '80%' }">
      <div class="delete-confirm">
        <h3>确认删除</h3>
        <p>确定要删除这个地址吗？删除后无法恢复。</p>
        <div class="confirm-actions">
          <nut-button @click="showDeleteConfirm = false">取消</nut-button>
          <nut-button type="danger" @click="confirmDelete">确认删除</nut-button>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAddressStore } from '@/stores/address'
import { Left } from '@nutui/icons-vue'

const router = useRouter()
const route = useRoute()
const addressStore = useAddressStore()

// 删除确认
const showDeleteConfirm = ref(false)
const addressToDelete = ref(null)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 新增地址
const addNewAddress = () => {
  router.push('/address-edit/new')
}

// 编辑地址
const editAddress = (addressId) => {
  router.push(`/address-edit/${addressId}`)
}

// 选择地址（如果是从其他页面跳转过来选择地址）
const selectAddress = (address) => {
  if (route.query.select) {
    addressStore.setDefaultAddress(address)
    router.go(-1)
  }
}

// 设置默认地址
const setDefaultAddress = (addressId) => {
  addressStore.setDefaultAddress(addressId)
  showToast('已设为默认地址')
}

// 删除地址
const deleteAddress = (addressId) => {
  addressToDelete.value = addressId
  showDeleteConfirm.value = true
}

// 确认删除
const confirmDelete = () => {
  if (addressToDelete.value) {
    const success = addressStore.deleteAddress(addressToDelete.value)
    if (success) {
      showToast('地址删除成功')
    } else {
      showToast('地址删除失败')
    }
    addressToDelete.value = null
  }
  showDeleteConfirm.value = false
}

// 显示提示
const showToast = (message) => {
  try {
    if (typeof window !== 'undefined' && window.nutui && window.nutui.showToast) {
      window.nutui.showToast({
        content: message,
        type: 'success',
        duration: 2000
      })
    } else {
      console.log('Toast提示:', message)
    }
  } catch (error) {
    console.log('Toast提示:', message)
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 20px;
}

.header {
  background: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  flex: 1;
  text-align: center;
}

.add-btn {
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 8px 16px;
}

.address-list {
  margin: 12px;
}

.address-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.address-content {
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.address-content:hover {
  background: #f9f9f9;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.phone {
  font-size: 14px;
  color: #666;
}

.address-tags {
  display: flex;
  gap: 8px;
}

.tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.default-badge {
  background: #ff4757;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.address-detail {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.address-actions {
  display: flex;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.action-item {
  flex: 1;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
  border-right: 1px solid #f0f0f0;
}

.action-item:last-child {
  border-right: none;
}

.action-item:hover {
  background: #f0f0f0;
}

.action-item.delete:hover {
  background: #ffebee;
}

.action-text {
  font-size: 14px;
  color: #666;
}

.action-item.delete .action-text {
  color: #ff4757;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #999;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  color: #666;
  margin: 0 0 8px 0;
}

.empty-state p {
  font-size: 14px;
  color: #999;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

/* 删除确认弹窗 */
.delete-confirm {
  padding: 20px;
  text-align: center;
}

.delete-confirm h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.delete-confirm p {
  font-size: 14px;
  color: #666;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-actions .nut-button {
  min-width: 80px;
}
</style>
